<!-- template inhertance -->
<extend name="layout/default"/>

<!-- styles -->
<block name="linkcss">
    <!--日期-->
    <link rel="stylesheet" href="/Public/home/css/bootstrap-datetimepicker.min.css">

    <link rel="stylesheet" href="/Public/home/css/Forms/product/create.css">
</block>

<!-- scripts -->
<block name="linkjs">
    <!--日期-->
    <script src="/Public/home/js/bootstrap-datetimepicker.js"></script>
    <script src="/Public/home/js/bootstrap-datetimepicker.zh-CN.js"></script>
    <!--公用计算金额js-->
    <script src="/Public/home/js/common.js"></script>
</block>

<!-- page title -->
<block name="webtitle">
    <title>创建订货产品出库申请</title>
</block>

<!-- navagations -->
<block name="breadcrumb">
    <ol class="breadcrumb breadcrumb-edit">
<!--        <li><a href="/">ATOP</a></li>-->
        <li class="active">创建订货产品出库申请</li>
    </ol>
</block>

<!-- main body -->
<block name="content">

    <form class="layui-form" action="">

        <!--基本资料-->
        <div class="layui-form-item">
            <div class="section-grey-table">
                <div class="section-title">基本资料</div>
                <div class="section-body">
                    <table class="table table-bordered basic-info-table">
                        <colgroup>
                            <col width="140">
                            <col>
                            <col width="140">
                            <col>
                            <col width="140">
                            <col>
                        </colgroup>
                        <tbody>
                        <tr>
                            <td class="ti-10">订单号<span>Sales Order</span></td>
                            <td colspan="3">
                                <input type="text" name="poNo" class="layui-input" lay-verify="required" placeholder="例：20150120XWD（日期加客户名称拼音头个字母）">
                            </td>
                            <td class="ti-10">客户合同号<span>Purchase Order</span></td>
                            <td>
                                <input type="text" name="contractNo" class="layui-input" lay-verify="required" placeholder="客户合同号">
                            </td>
                        </tr>
                        <tr>
                            <td class="ti-10">申请人<span>Sales Person</span></td>
                            <td>
                                <select name="salesPerson" id="salesPerson" lay-verify="required" lay-search lay-filter="salesPerson">
                                    <option value=""></option>
                                </select>
                            </td>
                            <td class="ti-10">申请部门<span>Dept</span></td>
                            <td>
                                <input type="text" name="dept" class="layui-input dept" lay-verify="required" placeholder="申请部门">
                            </td>
                            <td class="ti-10">申请日期<span>Date</span></td>
                            <td>
                                <input type="text" name="date" class="layui-input date" lay-verify="required" placeholder="申请日期">
                            </td>
                        </tr>
                        <tr>
                            <td class="ti-10">订货商名称<span>Name of Customer</span></td>
                            <td colspan="3">
                                <input type="text" name="nameOfCustomer" class="layui-input" lay-verify="required" placeholder="订货商名称">
                            </td>
                            <td class="ti-10">付款方式<span>Payment Term</span></td>
                            <td>
                                <select name="payMethod" id="payMethod" lay-verify="required">
                                    <option value=""></option>
                                </select>
                            </td>
                        </tr>
                        <tr>
                            <td class="ti-10">客户电话<span>Tel No.of Customer</span></td>
                            <td>
                                <input type="text" name="telNoOfCustomer" class="layui-input" lay-verify="required" placeholder="例：028-8335xxxx">
                            </td>
                            <td class="ti-10">客户传真<span>Fax of Customer</span></td>
                            <td>
                                <input type="text" name="phoneOfCustomer" class="layui-input" lay-verify="phone" placeholder="例：153xxxxxxxxxx">
                            </td>
                            <td class="ti-10">客户手机<span>Phone of Customer</span></td>
                            <td>
                                <input type="text" name="phoneOfCustomer" class="layui-input" lay-verify="phone" placeholder="例：153xxxxxxxxxx">
                            </td>
                        </tr>
                        <tr>
                            <td class="ti-10">公司地址<span>Company Address</span></td>
                            <td colspan="5">
                                <input type="text" name="companyAddress" class="layui-input" lay-verify="required" placeholder="公司地址">
                            </td>
                        </tr>
                        <tr>
                            <td class="ti-10">送货地址<span>Delivery Address</span></td>
                            <td colspan="5">
                                <input type="text" name="receiptAddress" class="layui-input" lay-verify="required" placeholder="收货地址">
                            </td>
                        </tr>
                        <tr>
                            <td class="ti-10">公司联系人<span>Company Contact</span></td>
                            <td>
                                <select name="companyContact" id="companyContact" lay-verify="required" lay-search>
                                    <option value=""></option>
                                </select>
                            </td>
                            <td class="ti-10">收货人<span>Receiver</span></td>
                            <td>
                                <input type="text" name="receiver" class="layui-input" lay-verify="required" placeholder="收货人">
                            </td>
                            <td class="ti-10">收货人电话<span>Receiver of Phone</span></td>
                            <td>
                                <input type="text" name="phoneOfReceiver" class="layui-input" lay-verify="phone" placeholder="例：153xxxxxxxxxx">
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <!--产品信息-->
        <div class="layui-form-item">
            <div class="section-grey-table">
                <div class="section-title">产品信息</div>
                <div class="section-body">
                    <table class="table table-bordered product-items-table table-layout-fixed">
                        <thead>
                        <tr>
                            <th width="50">序号<span>NO</span></th>
                            <th width="128">型号<span>Part Number</span></th>
                            <th width="20%">描述<span>Description</span></th>
                            <th width="6%">数量<span>Qty.</span>   </th>
                            <th width="50">单位<span>Pcs</span></th>
                            <th width="6%">单价<span>USD</span></th>
                            <th >合计金额<span>Sub-Total</span></th>
                            <th width="87">含16%税<span>Tax Include</span></th>
                            <th width="75">ED保护<span>Protection</span></th>
                            <th>计划交货时间<span>Planned Time</span></th>
                            <th>实际交货时间<span>Actual Time</span></th>
                            <th width="80">操作<span>Operate</span></th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td class="ti-10">1</td>
                            <td>
                                <input type="text" name="product[1][model]" class="layui-input" lay-verify="required">
                            </td>
                            <td>
                                <input type="text" name="product[1][description]" class="layui-input" lay-verify="required">
                            </td>
                            <td>
                                <input type="text" name="product[1][num]" class="layui-input listen" lay-verify="required|number">
                            </td>
                            <td>
                                <input type="text" name="product[1][pcs]" class="layui-input" lay-verify="required" value="个">
                            </td>
                            <td>
                                <input type="text" name="product[1][unit_price]" class="layui-input listen" lay-verify="required">
                            </td>
                            <td>
                                <input type="text" name="product[1][total_amount]" readonly="" class="layui-input total-amount">
                            </td>
                            <td>
                                <select name="product[1][tax]" lay-verify="required">
                                    <option value="是" selected>是</option>
                                    <option value="否">否</option>
                                </select>
                            </td>
                            <td>
                                <select name="product[1][ed_protection]" lay-verify="required">
                                    <option value="是" selected>是</option>
                                    <option value="否">否</option>
                                </select>
                            </td>
                            <td>
                                <input type="text" name="product[1][planned_delivery_time]" class="layui-input date" lay-verify="required">
                            </td>
                            <td>
                                <input type="text" name="product[1][actual_delivery_time]" class="layui-input date" lay-verify="required">
                            </td>
                            <td class="ti-10">
                                <button type="button" class="layui-btn layui-btn-small add-detail-item">
                                    <span class="icon-plus"></span>
                                </button>
                                <button type="button" class="layui-btn layui-btn-small layui-btn-danger cut-detail-item">
                                    <span class="icon-minus"></span>
                                </button>
                            </td>
                        </tr>
                        <tr class="total">
                            <td class="ti-10" colspan="3">合计<span>Total</span></td>
                            <td >
                                <input type="text" name="totalQuantity" class="layui-input" readonly="">
                            </td>
                            <td colspan="3">
                                <input type="text" name="totalAmount" class="layui-input" readonly="" style="text-align: right">
                            </td>
                            <td colspan="5">
                                <input type="text" name="totalAmountUp" class="layui-input" readonly="">
                            </td>
                        </tr>
                        <tr class="require">
                            <td class="ti-10" colspan="2">要求与备注<span>Requirement and Remark</span></td>
                            <td colspan="10">
                                <textarea name="notes" class="layui-textarea" lay-verify="required" placeholder="例：ATOP品牌，兼容：T码，托盘包装（品牌，兼容，包装方式，缺一不可。）" rows="2"></textarea>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <!--按钮-->
        <div class="layui-form-item">
            <button type="button" class="layui-btn" lay-submit lay-filter="save">保存</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </form>

    <!--选择框模板-->
    <script type="text/html" id="select">
        <option value=""></option>
        {{#   layui.each(d, function(index, item){ }}
                <option value="{{ item.value }}">{{ item.name }}</option>
        {{#   }); }}
        {{#   if (d.length === 0) { }}
                无数据
        {{#   } }}
    </script>

    <!--数据渲染-->
    <script>
        $(function () {
            layui.use(['laytpl'],function () {
                var laytpl =layui.laytpl;

                //申请人
                var data = [
                    {"value":"1","name":"测试1"},
                    {"value":"2","name":"测试2"},
                    {"value":"3","name":"测试3"},
                ];
                var getTpl = select.innerHTML,
                    view = document.getElementById('salesPerson');
                laytpl(getTpl).render(data, function (html) {
                    view.innerHTML = html;
                });

                //付款方式
                var data1 = [
                    {"value":"1","name":"货到付款"},
                    {"value":"2","name":"测试1"},
                    {"value":"3","name":"测试2"},
                ];
                var view1 = document.getElementById('payMethod');
                laytpl(getTpl).render(data1, function (html) {
                    view1.innerHTML = html;
                });

                //公司联系人
                var data2 = [
                    {"value":"1","name":"测试1"},
                    {"value":"2","name":"测试2"},
                    {"value":"3","name":"测试3"},
                ];
                var view2 = document.getElementById('companyContact');
                laytpl(getTpl).render(data2, function (html) {
                    view2.innerHTML = html;
                });
            })
        });

        //代表国内的表单
        var type = 1;
    </script>
    <script src="/Public/home/js/Forms/product/create.js"></script>
</block>